      $(function(){

             var grid=  $("#employeeGrid").jqGrid({
                url: "search",
                datatype: "json",
                mtype: "GET",
                colNames: ["UserName", "Name", "City","Mobile",  "E-mail","Last Login",'Actions'],
                colModel: [
                    { name: "userName", width: 105 },
                    { name: "name", width: 150 },
                    { name: "address.city", width: 80, align: "left" },
                    { name: "mobile", width: 80, align: "left" },
                    { name: "email", width: 100, sortable: false } ,
                    { name: "lastLogin", width: 100, sortable: false },
                    { name : 'employeeId',width:50, index:'employeeId', sortable:false,editable:false ,formatter:actionFormat,formatoptions: {icon: 'fa-pencil', link_class: 'add-link-class',model:'#employeeForm'}, unformat:actionUnFormat},
                ],
                pager: "#employeeGridPager",
                 postData: {
                        query: function() { return $("#itemName").val(); }

                    } ,
                    toolbarfilter: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: "employeeId",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "Employees" ,
                height:400,
                autowidth : true,
                jsonReader : {root:"employees"},
                gridComplete: function(){

                }

                });



                jQuery("a.get_selected_ids").bind("click", function() {
                		s = jQuery("#employeeGrid").jqGrid('getGridParam', 'selarrrow');

                	});

                	   initGridUI();



  $('#new-employee-form').validator({custom:function($el){alert($el); return false;}}).on('submit', function (event) {
                       if (event.isDefaultPrevented()) {
                        // handle the invalid form...
                      } else {
                            event.preventDefault();

                            var options = {
                                                    url:       'save' ,
                                                    type:      'post' ,
                                                    dataType:  'json' ,
                                                    clearForm: true  ,
                                                    resetForm: true  ,
                                                    timeout:   9000  ,
                                                    success:    function() {
                                                       grid.trigger("reloadGrid");
                                                        $('#customerForm').modal('hide')
                                                     }  ,
                                                      error:    function() {
                                                        $("#model-error-block").show();

                                                     }
                                                };

                                                $("#new-employee-form").ajaxSubmit(options) ;
                                                return false;
                      }
                });


			 $( "#search-item").button().click(function () {

             	grid.trigger("reloadGrid");
			});

            $("#employeeForm-userName").change(function () {
                $.ajax({url: "checkUserName", dataType: "json",data: {
                            "query": $("#employeeForm-userName").val()
                      },success: function(result){
                   if(result.employeeId)
                    $("#userNameAlert" ).removeClass( "hide" );
                    else{
                     $("#userNameAlert" ).addClass("hide")
                    }

                 }});

			});

			$('#employeeForm').modal({
                    keyboard: false ,
                    backdrop: false,
                    show: false
            })

            function actionUnFormat( cellvalue, options, cell){
            	return $('img', cell).attr('src');
            }


    });

     function showDetails(index,model){

                             $.ajax({url: "getDetails", dataType: "json",data: {
                                               "employeeId": index
                                     },success: function(productObj){

                                       if(productObj.employeeId)
                                       {
                                              loadFormData(productObj,'employeeForm');
                                              $('#model-title').text("Edit Employee");
                                             // var options= {'keyboard':false,'show':true};
                                            //  $('#employeeForm').modal(options);
                                       }
                                        else{

                                        }

                                   }});

              }

